<template>
	
    <div class="windowss_add">
      <div class="title">
        <span class="left">创建窗口</span>
        <el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
        </el-button>
      </div>
      <div class="main">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="窗口名称（必填）：">
            <el-input v-model="form.name" placeholder="如：1号窗口"></el-input>
          </el-form-item>
          <el-form-item label="业务类型（必填）：">
            <el-select v-model="form.region" style="width: 100%" placeholder="业务类型选择">
            
              <el-option v-for="(item,i) in bussiness" :key="i" :label="item.businessName" :value="item.id"   ></el-option>
            
            </el-select>
          </el-form-item>
          <el-form-item label="工作人员（选填）：">
            <el-input v-model="form.names" placeholder="窗口工作人员姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系方式（选填）：">
            <el-input v-model="form.phone" placeholder="窗口工作人员联系方式"></el-input>
          </el-form-item>

          <el-form-item label="设备绑定（选填）：">
            <el-select class="equipment" v-model="form.hjq" style="width: 100%" placeholder="呼叫器选择" >
            
              <el-option v-for="(item,i) in hjq" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            
            </el-select>
            <el-select class="equipment" v-model="form.pjq" style="width: 100%" placeholder="评价器选择" >
            
              <el-option v-for="(item,i) in pjq" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            
            </el-select>
            <el-select class="equipment" v-model="form.qhj" style="width: 100%" placeholder="取号器选择" >
            
              <el-option v-for="(item,i) in qhj" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            
            </el-select>

          
            <el-select class="equipment" v-model="form.dp" style="width: 100%" placeholder="电视机大屏选择" >
            
              <el-option v-for="(item,i) in dp" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            
            </el-select>
            <el-select v-model="form.led" style="width: 100%" placeholder="LED选择"  >
            
              <el-option v-for="(item,i) in led" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            
            </el-select>
          </el-form-item>



          <el-form-item label="备注（选填）：">
            <el-input type="textarea" v-model="form.contents" resize="none" rows="5" placeholder="业务描述，子业务类型以及办理业务所需材料。" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="subbtn" :plain="true" @click="btnMessages()" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>
<script>
import {
  findEvalate,
  windowMessageAdd,
  windowShebeiMess
} from "../api/getData";
import { setTimeout } from "timers";
export default {
  name: "windowss_add",
  data: function() {
    return {
      form: {},
      bussiness: "",
      bussinessid: "",
      hjq: "",
      pjq: "",
      qhj: "",
      led: "",
      dp:''
    };
  },
  created: function() {}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {
    findEvalate({}).then(data => {
      console.log(data.data);
      this.bussiness = data.data.data.Bussinesstype;
    });
    windowShebeiMess({}).then(data => {
      this.bussiness = data.data.data.businessType;
      this.hjq = data.data.data.hjq;
      this.pjq = data.data.data.pjq;
      this.qhj = data.data.data.qhj;
      this.led = data.data.data.led;
      this.dp = data.data.data.dp;
    });
  }, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
    btnMessages() {
      console.log(this.form);
      console.log(this.bussinessid);
      if (this.form.name === undefined) {
        this.$message("请填写窗口名称");
        return;
      }
      if (this.form.region === "") {
        this.$message("请选择业务类型");
        return;
      }
      windowMessageAdd({
        iphone: this.form.phone || "",
        windowName: this.form.name,
        worker: this.form.names || "",
        remarks: this.form.contents || "",
        businessTypeId: this.form.region,
        led:this.form.led || "",
        hjq: this.form.hjq|| "",
        pjq: this.form.pjq|| "",
        qhj: this.form.qhj|| "",
        dp:this.form.dp|| "",
      }).then(data => {
        console.log(data);
        if (data.data.code === 0) {
          this.$message({
            showClose: true,
            message: "创建成功",
            type: "success"
          });
          var _this = this;
          setTimeout(function() {
            _this.$router.push({ path: "/windowss/windowssindex" });
          }, 500);
        }
        if (data.data.code === 1) {
          this.$message({
            showClose: true,
            message: data.data.msg,
            type: "error"
          });
        }
      });
    }
  } // 函数
};
</script>
<style lang='scss'>
.windowss_add{
       box-sizing: border-box;
			 .title{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 height: 64px;
				 line-height: 64px;
				 background: #fff;
				 overflow: hidden;
				 text-align: left;
				 padding:0 20px;
				 color: #333437;
				 font-size: 16px;
			 }
      .main{

        background: #fff;
        width: 100%;
        margin-top: 20px;
        padding: 5% 20%;
        .textArea{
          textarea{
            min-height: 240px!important;
          }

        }
        .el-form-item__label{
          font-weight: bold;
        }
        .btn{
          width: 120px;
          height:32px;
          line-height: 1px;
          margin-left: 80px;
        }
      }
      .equipment{
        margin-bottom: 20px;
      }
    }
</style>
